<template>
  <div class="app-container">
      <div class="filter-container">
        <h3 style="margin-top:0">我的申诉</h3>
        <div style="margin-top:10px;">

          <el-date-picker
            v-model="listQuery.checktime"
            type="daterange"
            range-separator="至"
            class="filter-item"
            style="width:300px"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>

          <el-button-group class="filter-item">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="search"
            >
              搜索
            </el-button>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-refresh"
              @click="refresh"
            >
              重置
            </el-button>

          </el-button-group>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        height="100%"
        class="table-container"
        highlight-current-row
      >

        <el-table-column
          width="80"
          label="申诉id"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>

        <el-table-column
          width="120"
          label="申诉类型"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.typeText }}
          </template>
        </el-table-column>

        <el-table-column
          width="150"
          label="首件地区"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.cityText }}
          </template>
        </el-table-column>
        <el-table-column
          width="180"
          label="申诉时间"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.dateline }}
          </template>
        </el-table-column>

        <el-table-column
          width="400"
          label="申诉贴"
          align="center"
        >
          <template slot-scope="scope">
             <div v-if="scope.row.wid_ary[0].wid">
               <div v-for="item in scope.row.wid_ary" style="text-align: left;color:#369"  class="links"><a :href="`https://wz.mala.cn/wz/wzinfo?wid=${item.wid}`" target="_blank">{{item.title}}</a></div>
             </div>
            <div v-else>
              <div v-for="item in scope.row.wid_ary" style="text-align: left;color:#369" class="links"><a :href="item" target="_blank">{{item}}</a></div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          width="320"
          label="当前状态"
          align="left"
        >
          <template slot-scope="scope">
            <div class="status">
              <div class="status_0" v-if="scope.row.status==0"><span class="el-icon-warning-outline"></span>待处理</div>
              <div class="status_1" v-else-if="scope.row.status==1"><span class="el-icon-check"></span> 通过</div>
              <div class="status_2" v-else-if="scope.row.status==2"><span class="el-icon-close"></span> 不通过<div class="reason">{{scope.row.action_reason}}</div></div>
            </div>
          </template>
        </el-table-column>


      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="fetchData"
      />
  </div>
</template>

<style scoped lang="less">
.links{
  a {
    &:hover{
      color: #20a0ff;
    }
  }
}
.status{
  &_0{
    color:#5e6d82;
  }
  &_1{
    color:green;
  }
  &_2{
    color:red;
  }
  .reason{
    font-size:12px;
  }
}
</style>
<script>
import Pagination from '@/components/Pagination'
import {getShensu} from '@/api/user'

let id = 0
export default {
  components: {
    Pagination
  },
  data() {
    return {
      bind_cid_loading:false,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() + 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [end, start]);
          }
        }, {
          text: '本月',
          onClick(picker) {
            const now = new Date();
            const start = new Date(now.getFullYear(), now.getMonth(), 1)
            const end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
            start.setTime(start.getTime());
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      total: 0,
      list: [],
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        checktime: '',
      },
      loading: false,
    }
  },
  created() {
    //默认本月
      const now = new Date();
      const start = new Date(now.getFullYear(), now.getMonth()-3, 1)
      const end = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
      const defaultTime = [start, end]
      this.$set(this.listQuery, 'checktime', defaultTime)
      this.fetchData()
  },
  methods: {
    search(){
      this.fetchData()
    },
    refresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
      }
      this.fetchData()
    },
    fetchData(column) {
      this.listLoading = true
      getShensu(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    submit() {

    }
  }
}
</script>
